<!-- 更换背景图片对话框组件 -->
<template>
  <!-- 使用 app-dialog 组件，并通过 v-model 控制对话框的显示与隐藏 -->
  <app-dialog v-model="isDialogOpen">
    <!-- 定义对话框头部模板 -->
    <template #header>
      <!-- 显示对话框标题 -->
      <h2>更换背景图片</h2>
    </template>
    <!-- 定义对话框主体模板 -->
    <template #default>
      <!-- 如果存在背景图片，则显示缩略图 -->
      <div v-if="backgroundImage">
        <!-- 显示背景图片缩略图 -->
        <img :src="backgroundImage" alt="背景缩略图" class="thumbnail" />
      </div>
      <!-- 如果没有背景图片，则显示文件上传输入框 -->
      <div v-else>
        <!-- 文件上传输入框，选择文件后触发 handleFileUpload 方法 -->
        <input type="file" @change="handleFileUpload" accept="image/*" />
      </div>
    </template>
    <!-- 定义对话框底部模板 -->
    <template #footer>
      <!-- 底部按钮容器 -->
      <div class="footer-container">
        <!-- 如果存在背景图片，则显示清除图片按钮 -->
        <button v-if="backgroundImage" class="clear-image-button" @click="clearImage">清除图片</button>
        <!-- 关闭对话框按钮 -->
        <button class="close-button" @click="isDialogOpen = false">关闭</button>
      </div>
    </template>
  </app-dialog>
</template>

<script lang="ts" setup>
// 导入 Vue 组合式 API
import { computed, defineProps, defineEmits, type ComputedRef } from 'vue';
// 导入图片存储模块
import { useImageStore } from '@/stores/imageStore';
// 导入对话框组件
import AppDialog from './app-dialog.vue';

/**
 * 定义组件的 props，支持 v-model 双向绑定
 */
const props = defineProps<{
  /**
   * 对话框的显示状态，通过 v-model 传递
   */
  modelValue: boolean
}>();

/**
 * 定义组件的事件，用于更新 v-model 的值
 */
const emit = defineEmits(['update:modelValue']);

/**
 * 通过计算属性实现 v-model 的双向绑定
 */
const isDialogOpen: ComputedRef<boolean> = computed({ 

  /**
   * 获取对话框的显示状态
   * @returns 对话框的显示状态
   */
  get: (): boolean => props.modelValue, 
  /**
   * 设置对话框的显示状态，并触发更新事件
   * @param value - 对话框的显示状态
   */
  set: (value: boolean): void => emit('update:modelValue', value) 
});

// 获取图片存储实例
const imageStore = useImageStore();

/**
 * 计算属性，用于获取存储中的背景图片
 */
const backgroundImage: ComputedRef<string | null> = computed(() => imageStore.backgroundImage);



/**
 * 处理文件上传事件
 * @param event - 文件上传事件对象
 */
const handleFileUpload = (event: Event): void => { 

  // 忽略 TypeScript 类型检查，获取上传的文件
  // @ts-ignore
  const file = event.target.files[0];
  // 如果选择了文件
  if (file) {
    // 创建文件读取器
    const reader = new FileReader();
    // 文件读取完成后的回调函数
    reader.onload = (e) => { 
      // 忽略 TypeScript 类型检查，将读取的文件内容设置为背景图片
      // @ts-ignore
      imageStore.setBackgroundImage(e.target.result);
    };
    // 以 Data URL 格式读取文件
    reader.readAsDataURL(file);
  }
};

/**
 * 清除背景图片
 */
const clearImage = (): void => {

  // 调用图片存储实例的清除方法
  imageStore.clearBackgroundImage();
};
</script>

<style lang="scss" scoped>
/**
 * 背景图片缩略图样式
 */
.thumbnail {
  width: 100%;
  margin-bottom: 10px;
}

/**
 * 对话框底部按钮容器样式
 */
.footer-container {
  display: flex;
  justify-content: flex-end;
  /**
   * 按钮之间的间距样式
   */
  button + button {
    margin-left: 10px;
  }

  /**
   * 清除图片按钮样式
   */
  .clear-image-button {
    padding: 8px 16px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
    /**
     * 鼠标悬停时的样式
     */
    &:hover {
      background-color: #ff4444;
    }

    /**
     * 鼠标点击时的样式
     */
    &:active {
      background-color: #cc0000;
      transform: translateY(1px);
    }
  }

  /**
   * 关闭按钮样式
   */
  .close-button {
    padding: 8px 16px;
    background-color: #f5f5f5;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
}
</style>